<template>
  <div class="body">
    <transition name="fade">
      <ul v-if="show">
        <li>Drop Down 1</li>
        <li @mouseover="()=>{showDeep=true}" @mouseleave="()=>{showDeep=false}">
          Deep Drop Down
          <span class="iconfont">&#xe628; </span>
          <transition name="deep">
            <ul class="deepBox" v-if="showDeep">
              <li>Drop Down 1</li>
              <li>Drop Down 1</li>
              <li>Drop Down 1</li>
              <li>Drop Down 1</li>
              <li>Drop Down 1</li>
            </ul>
          </transition>
        </li>
        <li>Drop Down 1</li>
        <li>Drop Down 1</li>
        <li>Drop Down 1</li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDeep: false,
    };
  },
  props: ["show"],
};
</script>

<style lang="less" scoped>
.body {
  ul {
    position: absolute;
    left: 0;
    color: #000;
    background: #fff;
    top: 40px;
    padding: 10px 0;
    z-index: 100;
    //尝试解决文字上下移动的问题
    backface-visibility: hidden;
    perspective: 1000;
    li {
      width: 150px;
      font-size: 15px;
      font-weight: 400;
      color: #2f4d5a;
      padding: 12px 20px;
      margin-left: 10px;
      //二级下拉框
      .deepBox {
        position: absolute;
        left: 200px;
        top: 50px;
        box-shadow: 0px 0px 10px #ccc;
      }
    }
    & :hover {
      color: #67b0d1;
    }
  }
}
@keyframes toUp {
  0% {
    top: 60px;
  }
  100% {
    top: 40px;
  }
}
.fade-enter-active {
  transition: all 1s;
  animation: toUp 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  top: 60px;
}
@keyframes toRight {
  0% {
    left: 180px;
  }
  100% {
    left: 200px;
  }
}
.deep-enter-active {
  transition: all 1s;
  animation: toRight 0.5s;
}
.deep-enter,
.deep-leave-active {
  opacity: 0;
  left: 200px;
}
</style>